<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <input type="checkbox" name="" id="all"><label for="all">全选</label>
    </div>
    <div>
        <input type="checkbox" id="one" class="fruit"><label for="one">苹果</label>
        <span>删除</span>
    </div>
    <div>
        <input type="checkbox" id="two" class="fruit"><label for="two">香蕉</label>
        <span>删除</span>

    </div>
    <div>
        <input type="checkbox" id="three" class="fruit"><label for="three">橘子</label>
        <span>删除</span>

    </div>
    <div>
        <input type="checkbox" id="four" class="fruit"><label for="four">葡萄</label>
        <span>删除</span>

    </div>
    <div>
        <input type="checkbox" id="five" class="fruit"><label for="five">桃子</label>
        <span>删除</span>

    </div>
    <div>
        <input type="checkbox" id="six" class="fruit"><label for="six">西瓜</label>
        <span>删除</span>

    </div>
    <div>
        <input type="checkbox" id="seven" class="fruit"><label for="seven">李子</label>
        <span>删除</span>

    </div>
    <div>
        <input type="checkbox" id="eight" class="fruit"><label for="eight">荔枝</label>
        <span>删除</span>

    </div>

    <div>
        <button>删除所选</button>
    </div>

    <script>
        let input = document.getElementsByClassName("fruit");
        let span=document.getElementsByTagName("span");
        document.body.onclick = function () {
            // 全选和全不选
            if (event.target.id === "all") {
                if (event.target.checked) {
                    for (let i = 0; i < input.length; i++) {
                        input[i].checked = true;
                    }

                } else {
                    for (let i = 0; i < input.length; i++) {
                        input[i].checked = false;
                    }
                }
            }

            // 删除所选
            if (event.target.localName == "button") {
                for (let i = 0; i < input.length; i++) {
                    if (input[i].checked) {
                        input[i].parentNode.remove();
                        i--;

                    }
                }
            }

            // 删除单个水果
            if(event.target.localName==="span"){
                event.target.parentNode.remove();
            }



        }
    </script>






</body>

</html>